<template>
  <view class="v2 box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'"> </view>
    <view class="tou top fixed" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
      <!-- {{searchlogType==1?'帮帮同城':'帮帮车主'}} -->
    </view>
    <view class="sousuo">
      <image src="https://pic.bangbangtongcheng.com/static/sousuo2.png" />
      <input type="text" v-model="merchantName" placeholder="搜索" />
      <view class="quxiao" @click="up">搜索</view>
    </view>
    <view class="manage-page">
      <view class="manage-page-select">
        <text></text>
        <view class="manage-page-select-wrap">
          <uni-data-select
            v-model="merchantValue3"
            placeholder="请选择"
            @change="change33"
            :clear="false"
            :localdata="merchantOptions3"
          ></uni-data-select>
        </view>
      </view>
      <view class="manage-page-list">
        <view
          class="manage-page-item"
          v-for="(item, index) in merchantListV2"
          @click.stop="goGiftMana(item)"
        >
          <view class="manage-page-item-left">
            <image :src="item.storePicture" mode="aspectFill"></image>
          </view>
          <view class="manage-page-item-right">
            <view class="manage-page-item-title">
              <view class="">
                {{ item.merchantName }}
              </view>
              <view
                class=""
                v-if="item.status != 1 || item.deleteFlag == 1"
                style="
                  margin-top: 6rpx;
                  height: 34rpx;
                  font-size: 24rpx;
                  font-weight: 400;
                  color: #e00000;
                  line-height: 34rpx;
                "
              >
                {{ item.deleteFlag == 1 ? '商家已注销' : '商家已冻结' }}
              </view>
            </view>
            <view class="manage-page-item-info">
              <view class="manage-page-item-info-left">
                <!-- $Time.formatTime2 -->
                {{
                  item.lastVisitTime
                    ? '上次回访：' + $Time.formatTime2('yyyy/M/d', item.lastVisitTime)
                    : ''
                }}
              </view>
              <view class="manage-page-item-info-right">
                {{ item.distance ? item.distance + 'km' : '' }}
              </view>
            </view>
          </view>
        </view>
        <view v-if="merchantListV2.length == 0" class="none">
          <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
          <view>没有更多数据了</view>
        </view>
        <view class="down" v-show="merchantListV2.length != 0 && !downStatus">没有更多了</view>
      </view>
    </view>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'
  import permision from '@/js_sdk/wa-permission/permission.js'
  export default {
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    data() {
      return {
        downStatus: true,
        upStatus: true,
        trigger: false,
        merchantListV2: [],
        userInfo: uni.getStorageSync('Pduser'),
        merchantOptions3: [
          {
            value: '1',
            text: '距离最近',
          },
          {
            value: '2',
            text: '最近回访时间',
          },
          {
            value: '3',
            text: '最早回访时间',
          },
        ],
        merchantValue3: '',
        newTotal: 0,
        adminParam: {
          pageNo: 1,
          pageSize: 10,
        },
        merchantName: '',
      }
    },
    onLoad() {
      uni.showLoading()
      if (uni.getStorageSync('locationState') == 1) {
        this.getLocation()
      }
    },
    methods: {
      goGiftMana(item) {
        // if(item.deleteFlag==1){
        // 	uni.showToast({
        // 		title:'该商家已注销',
        // 		icon:'none'
        // 	})
        // 	return
        // }
        uni.navigateTo({
          url: '/pages_my/v2MerchantMana?res=' + encodeURIComponent(JSON.stringify(item)),
        })
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      change33(e) {
        if (!e) {
          return false
        }
        this.merchantListV2 = []
        this.adminParam.pageNo = 1
        this.downStatus = true
        if (this.upStatus) {
          this.trigger = true
          setTimeout(() => {
            this.getRecommend()
          })
        }
      },
      // 获取位置
      async getLocation() {
        this.getLocation1()
      },
      getLocation1() {
        let _this = this
        // uni.showLoading({
        // 	title: "加载中",
        // 	mask: true,
        // });
        uni.getLocation({
          type: 'gcj02',
          highAccuracyExpireTime: '3000',
          success(res) {
            console.log(res, '进来了')
            _this.latitude = res.latitude
            _this.longitude = res.longitude
            _this.getRecommend()
          },
          fail:(res) => {
            console.log(res, '经纬度没有授权');
            this.$SHOWMODAL_TO_SETTINGS();
            uni.hideLoading()
            uni.setStorageSync('locationState', 0)
            if (uni.getStorageSync('locationState') == 0) {
              // uni.showModal({
              //   title: '提示',
              //   content: '您已关闭位置权限或获取位置信息失败',
              //   success: function (res) {
              //     if (res.confirm) {
              //       // plus.runtime.openURL("app-settings:");
              //     } else if (res.cancel) {
              //       console.log('用户点击取消')
              //     }
              //   },
              // })
              return false
            }
          },
        })
      },
      getRecommend() {
        // 商家列表

        this.upStatus = false
        console.log('222')
        this.$myRequest
          .get('/api/mobile/vehicleOwner/getEnterpriseListByUserId', {
            userId: this.userInfo.id,
            longitude: this.longitude,
            latitude: this.latitude,
            screeningType: this.merchantValue3,
            ...this.adminParam,
            merchantName: this.merchantName,
          })
          .then((res) => {
            if (!res.enterpriseList.pageList.length) {
              this.downStatus = false
            }
            this.upStatus = true
            this.trigger = false
            // this.merchantListV2 = res.enterpriseList.pageList
            this.merchantListV2 = this.merchantListV2.concat(res.enterpriseList.pageList)
            this.newTotal = res.enterpriseList.pageCount
            uni.hideLoading()
            uni.stopPullDownRefresh()
            // this.wxUrl = res.r.gz_url;
            // console.log(this.wxUrl)
          })
      },

      up() {
        this.merchantListV2 = []
        this.adminParam.pageNo = 1
        this.downStatus = true
        if (this.upStatus) {
          this.trigger = true
          uni.showLoading()
          this.getRecommend()
        }
      },
      down() {
        if (
          this.newTotal &&
          Math.ceil(this.newTotal / this.adminParam.pageSize) > this.adminParam.pageNo
        ) {
          console.log('上拉加载')
          this.adminParam.pageNo++
          this.getRecommend()
        } else {
          this.downStatus = false
        }
      },
    },
    onPullDownRefresh() {
      this.up()
    },
    onReachBottom() {
      this.down()
    },
  }
</script>

<style lang="scss" scoped>
  .down {
    height: 60rpx;
    line-height: 60rpx;
    // border-top: 2rpx solid #d0d0d0;
    text-align: center;
  }
  .fixed {
    // display: flex;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100% !important;
    z-index: 40;
  }
  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;

    image {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }
  }
  .sousuo {
    position: relative;
    width: 686rpx;
    height: 72rpx;
    margin-top: 30rpx;
    margin-left: 30rpx;
    border: 2rpx solid #64b6a8;
    border-radius: 36rpx;
    overflow: hidden;
    display: flex;
    align-items: center;
    image {
      display: inline-block;
      width: 50rpx;
      height: 50rpx;
      margin-left: 20rpx;
    }

    input {
      display: inline-block;
      width: 400rpx;
      height: 50rpx;
      line-height: 52rpx;

      font-size: 28rpx;
    }

    .quxiao {
      position: absolute;
      top: 50%;
      right: 6rpx;
      transform: translate(0, -50%);
      width: 120rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-align: center;
      background: #64b6a8;
      border-radius: 30rpx 30rpx 30rpx 30rpx;
    }
  }
  .none {
    text-align: center;

    image {
      width: 430rpx;
      margin-bottom: 16rpx;
    }

    view {
      height: 40rpx;
      line-height: 40rpx;
      color: #666;
      margin-bottom: 24rpx;
    }
  }
  .box {
    background-color: #fff;
    min-height: 100vh;
  }
  .box {
    width: 100%;
    min-height: 100vh;
    // padding-bottom: 130rpx;
    background-color: #fff;
  }
  .manage-page {
    width: 750rpx;
    // height: 1110rpx;
    background: #ffffff;
    border-radius: 40rpx 40rpx 0 0;
    opacity: 1;
    padding: 24rpx 30rpx 0 30rpx;
    flex: 1;
    .manage-page-select {
      display: flex;
      align-items: center;
      justify-content: space-between;

      font-size: 28rpx;
      font-weight: 400;
      color: #666666;

      // line-height: 39rpx;
      text {
        // flex: 1;
      }

      ::v-deep {
        .uni-stat__select {
          width: 120px;

          .uni-select {
            width: 240rpx;
          }
        }
      }
    }

    .manage-page-list {
      margin-top: -8rpx;

      .manage-page-item {
        display: flex;
        padding: 32rpx 0;
        border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

        .manage-page-item-left {
          image {
            width: 310rpx;
            height: 200rpx;
            box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(67, 67, 67, 0.102);
            border-radius: 16rpx 16rpx 16rpx 16rpx;
            opacity: 1;
          }
        }

        .manage-page-item-right {
          padding-left: 30rpx;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .manage-page-item-title {
            font-size: 30rpx;
            font-weight: 400;
            color: #333333;
            line-height: 42rpx;
          }

          .manage-page-item-info {
            display: flex;
            justify-content: space-between;
            font-size: 24rpx;
            font-weight: 400;
            color: #666666;
            line-height: 34rpx;
          }
        }
      }
    }
  }

  .v2 /deep/ .uni-popup {
    z-index: 9999;
  }
  .v2 {
    ::v-deep {
      .uni-select {
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        opacity: 1;
        border: 2rpx solid #d8d8d8;

        .uni-select__input-placeholder {
          font-size: 28rpx;
          font-weight: 400;
          color: #333333;
        }

        .uni-select__input-text {
          font-size: 28rpx;
          font-weight: 400;
          color: #333333;
        }

        .uni-icons.uniui-top,
        .uni-icons.uniui-bottom {
          color: #64b6a8;
          font-size: 32rpx !important;
        }

        .uni-select__selector-item {
          font-size: 28rpx;
          font-weight: 400;
          color: #999999;
          line-height: 56rpx;
        }
      }
    }
  }
</style>
